<template>
  <view class="pages">
    <view class="form-wrap w100">
      <u--form labelPosition="left" :model="form" ref="uForm" labelWidth="178" :labelStyle="labelStyle">
        <u-form-item label="企业名称：" prop="company_name" required>
          <u--input v-model="form.company_name" border="surround" placeholder="请输入企业名称"></u--input>
        </u-form-item>
        <u-form-item label="姓名：" prop="realname" required>
          <u--input v-model="form.realname" border="surround" placeholder="请输入姓名"></u--input>
        </u-form-item>
        <u-form-item label="身份证：" prop="card" required>
          <u--input v-model="form.card" border="surround" placeholder="请输入身份证号码"></u--input>
        </u-form-item>
        <u-form-item label="身份证正面：" prop="cardimg_1" required>
          <u-upload :fileList="cardimg_1List" @afterRead="cardimg_1AfterRead" @delete="cardimg_1Delete" width="120"
            height="120" :maxCount="1" :previewFullImage="true"></u-upload>
        </u-form-item>
        <u-form-item label="身份证背面：" prop="cardimg_2" required>
          <u-upload :fileList="cardimg_2List" @afterRead="cardimg_2AfterRead" @delete="cardimg_2Delete" width="120"
            height="120" :maxCount="1" :previewFullImage="true"></u-upload>
        </u-form-item>
        <u-form-item label="备注信息：" prop="remark" v-if="userinfo.remark">
          <u--textarea v-model="userinfo.remark"></u--textarea>
        </u-form-item>
      </u--form>
      <view class="confirm">
        <u-button :disabled="[1,2].includes(userInfo.realstatus)" type="primary" @click="confirm">{{btnText}}</u-button>
      </view>
    </view>
  </view>
</template>

<script>
  import store from '@/utils/store'
  export default {
    data() {
      return {
        labelStyle: {
          fontSize: "28rpx",
          color: "#666",
        },
        cardimg_1List: [],
        cardimg_2List: [],
        form: {
          company_name: '',
          realname: '',
          card: '',
          cardimg_1: '',
          cardimg_2: '',
        },
        userInfo: {},
        isUpload: false, // 是否需要重新上传图片
        btnText: '提交',
      }
    },
    onLoad() {
      this.getUserInfo()
    },
    methods: {
      async getUserInfo() {
        await this.$http('/user/userinfo').then(res => {
          this.userInfo = res
          if (res.company_name) this.form.company_name = res.company_name
          if (res.realname) this.form.realname = res.realname
          if (res.card) this.form.card = res.card
          if (res.cardimg_1) {
            this.form.cardimg_1 = res.cardimg_1
            this.cardimg_1List = [{
              url: res.cardimg_1
            }]
          }
          if (res.cardimg_2) {
            this.form.cardimg_2 = res.cardimg_2
            this.cardimg_2List = [{
              url: res.cardimg_2
            }]
          }
          if (res.realstatus == 1) this.btnText = '审核中'
          else if (res.realstatus == 2) this.btnText = '审核通过'
          else if (res.realstatus == 3) this.btnText = '重新提交'
        })
      },
      // 选择身份证正面
      cardimg_1AfterRead(event) {
        let lists = [].concat(event.file)
        let fileListLen = this.cardimg_1List.length
        lists.map((item) => {
          this.cardimg_1List.push({
            ...item
          })
        })
      },
      // 删除身份证正面
      cardimg_1Delete(event) {
        this.cardimg_1List.splice(event.index, 1)
        this.isUpload = true
      },
      // 选择身份证背面
      cardimg_2AfterRead(event) {
        let lists = [].concat(event.file)
        let fileListLen = this.cardimg_2List.length
        lists.map((item) => {
          this.cardimg_2List.push({
            ...item
          })
        })
      },
      // 删除身份证背面
      cardimg_2Delete(event) {
        this.cardimg_2List.splice(event.index, 1)
        this.isUpload = true
      },
      async confirm() {
        // if ([1, 2].includes(this.userInfo.realstatus)) return
        if (this.form.company_name == '') return this.$f.toast('请输入企业名称')
        if (this.form.realname == '') return this.$f.toast('请输入姓名')
        if (this.form.card == '') return this.$f.toast('请输入身份证号码')
        if (this.cardimg_1List.length == 0) return this.$f.toast('请上传身份证正面照片')
        if (this.cardimg_2List.length == 0) return this.$f.toast('请上传身份证背面照片')
        if (!this.isUpload) return this.submit()
        this.$f.tipLoading('图片上传中')
        let num = 0
        const length = this.cardimg_1List.length + this.cardimg_2List.length
        for (let i = 0; i < this.cardimg_1List.length; i++) {
          const result = await this.uploadFilePromise(this.cardimg_1List[i].url)
          this.form.cardimg_1 = result.fullurl
          num++
        }
        for (let i = 0; i < this.cardimg_2List.length; i++) {
          const result = await this.uploadFilePromise(this.cardimg_2List[i].url)
          this.form.cardimg_2 = result.fullurl
          num++
        }
        if (num == length) {
          uni.hideLoading()
          this.submit()
        }
      },
      submit() {
        this.$http('/user/real', this.form).then(res => {
          this.$to('/pages/home/my', {}, 'tab')
        })
      },
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: 'https://hsxt.ruyihui.net/api/common/upload',
            filePath: url,
            header: {
              'token': uni.getStorageSync('token')
              // 'token': '0fe60a01-8332-409e-8d01-fdf0d4f9b1bd',
            },
            name: 'file',
            timeout: 10000,
            success: (res) => {
              setTimeout(() => {
                resolve(JSON.parse(res.data).data)
              }, 1000)
            },
            fail: res => {
              console.log('error')
              this.$f.errorToast('上传失败')
              reject(res)
            }
          });
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .pages {
    background: linear-gradient(#cce4fb, #f0f4fa);
    padding: 16rpx 16rpx calc(16rpx + #{$safe});
  }

  .form-wrap {
    border-radius: 16rpx;
    background-color: #fff;
    padding: 34rpx;
    box-sizing: border-box;
    height: calc(100vh - 32rpx - #{$safe});
    position: relative;
  }

  .confirm {
    position: absolute;
    bottom: 34rpx;
    left: 34rpx;
    right: 34rpx;

    ::v-deep .u-button {
      border-radius: 80rpx;
    }
  }

  ::v-deep .u-input {
    padding: 8px 9px !important;
    background-color: #f4f8ff !important;
  }

  ::v-deep .u-border {
    border-color: #f4f8ff !important;
  }

  ::v-deep input,
  ::v-deep textarea {
    font-size: 28rpx !important;
  }

  .confirm {
    ::v-deep .u-button {
      font-size: 28rpx !important;
    }
  }

</style>
